<template>
    <fieldset>
        <legend>按钮鉴权</legend>
        <div id="box">
            <!-- 内容展示界面 -->
            <div class="content" v-if="enter">
                <p>列表展示</p>
                <button @click="esc">退出登录</button>
                <button @click="getList">获取列表</button>
                <h3>
                    <img :src="userInfo.headimgurl" alt="" width="50">
                    昵称:
                    <a href="">{{userInfo.name}}</a>
                </h3>
                <ul>
                    <li v-for="item in lists" :key="item._id">
                        <b>{{item.name}}</b>
                        <div>
                            <button v-has:read="permissionBtns">查看</button>
                            <button v-has:edit="permissionBtns">修改</button>
                            <button v-has:delete="permissionBtns">删除</button>
                            <button v-has:add="permissionBtns">增加</button>
                        </div>
                    </li>
                </ul>

            </div>



            <!-- 登录界面 -->
            <div class="login" v-else>
                <p>请登入</p>
                <div>
                    <label for="username">用户名:</label>
                    <input type="text" id="username" v-model="username">
                </div>
                <div>
                    <label for="password">密码:&nbsp;&nbsp;&nbsp;</label>
                    <input type="password" v-model="password">
                </div>

                <button @click="login">登入</button>
            </div>
        </div>
    </fieldset>
</template>

<script>

    export default{
        data(){
            return {
                enter:false,
                username:"",
                password:"",
                userInfo:{},
                lists:[],
                // 权限按钮
                permissionBtns:[]
            }
        },
        methods:{
            // 登录
            login(){
                fetch('http://chst.vip/users/login',{
                    // 请求方式
                    method:'post',
                    // 请求头
                    headers:{
                        'content-type':'application/json'
                    },
                    // 携带的参数
                    body:JSON.stringify({username:this.username,password:this.password})
                })
                .then(body => body.json())
                .then(res => {
                    // 根据成功信号判断是否登入
                    if(res.state){
                        console.log(res)
                        // 转接到内容界面
                        this.enter=true;
                        // 将请求到的数据中用户信息赋值给本地变量
                        this.userInfo = res.userInfo;
                        // 将用户的令牌存到本地，要想获取列表信息就需要这个，相当于一把钥匙向后端拿数据
                        sessionStorage.setItem('user-token',res.token);
                        // 获取用户权限
                        this.permissionBtns = res.permission.buttons;
                        
                        // 不用点击“获取列表”按钮，登入时自动获取
                        this.getList()
                   
                    }else{
                        alert(res.msg)
                    }
                })
            },
            // 退出登录
            esc(){
                this.enter = false;
                this.username="";
                this.password="";
            },

            // 获取信息列表
            getList(){
                fetch('http://chst.vip/students/getstulist?count=10',{
                    headers:{
                        'authorization':sessionStorage.getItem('user-token')
                    }
                })
                    .then(body => body.json())
                    .then(res => {
                        if(res.state){
                            this.lists = res.data
                        }else{
                            alert(res.msg)
                        }
                    })
            }
        },
        directives:{
            has:{
                inserted(el,binding){
                    // console.log(binding)
                    // 获取按钮需要的权限,从指令参数中获取
                    let button = binding.arg;
                    // 获取用户权限，从表达式中获取
                    let userButton = binding.value;
                    // 通过数组的方法includes来比对，是否存在，存在返回存在的值
                    let hasButton = userButton.includes(button);
                    // 判断是否存在
                    if(!hasButton){
                        el.parentNode.removeChild(el)
                    }
                }
            }
        }

    }

</script>


<style scoped>
    #box{
        width: 500px;
        
    }
    a{
        text-decoration: none;
    }
    fieldset{
        border: 0;
        outline: 0;
        border: 1px solid green;
    }
    legend{
        color: green;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
        border: 1px solid green;
    }
    li{
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* border: 1px solid deeppink; */
        margin: 10px;
        max-width: 500px;
    }
    .login p{
        color: #333;
        font-size: 20px;
        font-weight: 900;
    }
    .login div{
        margin-bottom: 10px;
    }
    .login button{
        width: 60px;
        height: 26px;
        font-size: 18px;
        line-height: 26px;
        color: #fff;
        background-color: rgb(75, 118, 10);
        border: 0;
        border-radius: 4px;
    }
    .content p:nth-of-type(1){
        font-size: 20px;
        font-weight: 900;
        color: #333;
    }
    .content button{
        /* width: 60px; */
        height: 26px;
        font-size: 18px;
        line-height: 26px;
        color: #fff;
        background-color: rgb(75, 118, 10);
        border: 0;
        border-radius: 4px;
    }
</style>